<template>
<div>
  <div>
    <van-image
        round
        width="10rem"
        height="10rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
<!--        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"-->

  </div>
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="账号密码登录">
      <div>
        <van-cell-group inset>
          <van-field
              v-model="user1.name"
              label="用户名"
              placeholder="用户名/手机号"
              :rules="[{ required: true, message: '请填写用户名或手机号' }]"
          />
          <van-field
              v-model="user1.password"
              type="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" @click="loginName()">
            登录
          </van-button>
        </div>
      </div>
      </van-tab>
      <van-tab title="短信验证码登录">
      <div>
        <!-- 可以使用 CellGroup 作为容器 -->
        <van-cell-group inset>
          <van-field v-model="user2.name" label="手机号：" placeholder="手机号" @change="checkPhone()"/>
          <van-field
              v-model="user2.password"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
          >
            <template #button>
<!--              <van-button size="small" type="primary" :disabled="btn1" @click="sendCode()">发送验证码</van-button>-->


              <span v-show="show" type="primary" :disabled="btn1" @click="sendCode()" >获取验证码</span>
              <span v-show="!show" class="count">{{count}}s后重新获取</span>


            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button round block type="success" @click="loginCode()">
              登录
            </van-button>
          </div>
        </van-cell-group>
      </div>
      </van-tab>
    </van-tabs>
  </div>
  <div>
    <van-row>
      <van-col span="6">
        <router-link to="/register" @click="zh()">注册账号</router-link>
      </van-col>
      <van-col span="12"></van-col>
      <van-col span="6">
        <router-link to="/find">忘记密码</router-link>
      </van-col>
    </van-row>
  </div>
</div>
</template>

<script>
export default {
  name: "LoginView",
  data(){
    return{
      show: true,
      count: '',
      timer: null,


      active:0,
      btn1:true,
      user1:{//账号密码
        name:"",
        password:"",
        city: "郑州",
        mobie: "华为"
      },
      user2:{//手机号验证码
        name:"",
        password:"",
        city: "郑州",
        mobie: "小米"
      },
    }
  },
  methods:{
    loginName(){
      //账号密码登录
      this.axios.post("api/user/loginname.do",this.user1).then((r)=>{
        if(r.data.code==200){

          this.$store.commit("setToken",r.data.data);
          //成功 跳转到首页
          this.$router.push("/index");
        }else {
          this.$toast(r.data.msg);
        }
      })
    },
    checkPhone(){
      //校验手机号是否存在
      this.axios.get("/api/user/checkphone.do?phone="+this.user2.name).then((r)=>{
        if(r.data.code==200){
          //存在  可以发送验证码
          this.btn1=false;
        }else {
          this.btn1=true;
          this.$toast("亲，你不知道手机号根本没有注册！");
        }
      })
    },
    sendCode(){//===============================`````
      //发送验证码
      this.axios.get("/api/sms/sendlogin.do?phone="+this.user2.name).then((r)=>{
        if(r.data.code==200){

          //存在  可以发送验证码
          this.btn1=true;
          this.$toast("亲，验证码发送成功，请查看手机！");
          //=====gsz
          const TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
          //===========gsz....
        }else {
          this.btn1=false;
          this.$toast("亲，手机是不是欠费！");
        }

      })
    },zh(){
      this.$router.push("/register");
    },
    loginCode(){
      //验证码登录
      this.axios.post("api/user/logincode.do",this.user2).then((r)=>{
        if(r.data.code==200){
          this.$store.commit("setToken",r.data.data);
          //成功 跳转到首页
          this.$router.push("/index");
        }else {
          this.$toast(r.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
span{
  border:1px solid #42b983;
  background-color: #2c3e50;
}
</style>